<template>
	<view class="container">
		<view class="l-aroundCenter top-section">
			<picker mode="selector" @change="confirmRecent" :range="columnsRecent" range-key="label">
				<view class="l-center item">
					<text class="label">{{ recentValue.label }}</text>
					<u-icon name="arrow-down-fill" color="#d8d8d8" size="40rpx"></u-icon>
				</view>
			</picker>
			<picker mode="selector" @change="confirmRecord" :range="columnsRecord" range-key="label">
				<view class="l-center item">
					<text class="label">{{ recordValue.label }}</text>
					<u-icon name="arrow-down-fill" color="#d8d8d8" size="40rpx"></u-icon>
				</view>
			</picker>
		</view>
		<view :class="['charts-box', { hide: chartHide || openRecordUnit }]">
			<qiun-data-charts type="line" ref="lineRef" :chartData="recentData" :ontouch="true" :onmovetip="true" />
		</view>
		<view class="l-mt-8 l-aroundCenter weightInfo">
			<view class="l-flex1 l-columnCenter">
				<text class="l-center label">平均体重</text>
				<text class="value">{{ weightInfo.average }}{{ unit === "1" ? "kg" : "斤" }}</text>
			</view>
			<view class="l-flex1 l-columnCenter">
				<text class="l-center label">高出目标体重天数</text>
				<text class="value">{{ weightInfo.overDay }}天</text>
			</view>
			<view class="l-flex1 l-columnCenter">
				<text class="l-center label">最高体重</text>
				<text class="value">{{ weightInfo.hightest }}{{ unit === "1" ? "kg" : "斤" }}</text>
			</view>
			<view class="l-flex1 l-columnCenter">
				<text class="l-center label">最低体重</text>
				<text class="value">{{ weightInfo.lowest }}{{ unit === "1" ? "kg" : "斤" }}</text>
			</view>
		</view>
		<view class="add-wrap">
			<view style="display: flex;justify-content: center;align-items: center;">
				<image src="/static/img/egg-leap.gif" style="width: 146rpx;margin-top: -16rpx;" mode="widthFix"
					@click="jumpTheory"></image>
				<view class="l-center btn-set" @click="$goto('/page_child/set-weight/set-weight')">记体重</view>
			</view>
			<view class="l-betweenCenter btn-group">
				<view class="l-center btn" @click="$goto('/page_child/set-target/set-target')">设置目标体重</view>
				<view class="l-center btn btn-delete" @click="$goto('/page_subject/delete-history/delete-history')">记录列表
				</view>
				<view class="l-center btn" @click="$goto('/page_child/feedback/feedback')">建议</view>
			</view>
		</view>
		<view v-if="floorAdsInfo.length != 0">
			<view v-for="item in floorAdsInfo" class="floor-ads">
				<image :src="item.imgSrc" @click="jumpFloorAdsUrl(item.jumpUrl)"></image>
			</view>
		</view>
		<view :class="['record-wrap', { hide: chartHide || openRecordUnit }]">
			<u-grid :border="true" col="2">
				<u-grid-item v-for="(item, index) in weightList" :key="index">
					<view class="l-py-10">
						<text class="l-center tit">{{ item.title }}</text>
						<u--text bold color="#000000" size="40rpx" margin="20rpx 0 0" align="center"
							:text="formatGridValue(item)"></u--text>
					</view>
				</u-grid-item>
			</u-grid>
			<u-divider text="月均体重" textSize="34rpx"></u-divider>
			<qiun-data-charts type="line" ref="barRef" :chartData="historyData" :ontouch="true" :onmovetip="true" />
			<!-- 			<qiun-data-charts type="column" ref="barRef" :chartData="historyData" /> -->
		</view>
		<u-popup :show="openRecordUnit" mode="center" @close="openRecordUnit = false" style="flex: none"
			bgColor="transparent" :closeOnClickOverlay="false" class="custom-confirm-popup">
			<view class="l-px-20 l-py-20 l-column record-way-wrap">
				<u--text text="最好用的体重记录" align="center" bold size="46rpx"></u--text>
				<u--text margin="40rpx 0 0" color="#999" text="为方便记录您的体重，首次使用请设置您的健康信息。" size="46rpx"
					align="center"></u--text>
				<u--text bold margin="20rpx 0 0" text="请选择记录方式:" align="center" size="46rpx"></u--text>
				<view :class="['l-center btn-radio', { active: String(unit) === '0' }]"
					@click="onChooseRecordUnit('0')">斤</view>
				<view :class="['l-center btn-radio', { active: String(unit) === '1' }]"
					@click="onChooseRecordUnit('1')">千克 (kg) 公斤</view>
				<view class="l-mt-16 btn-large" @click="onConfirmRecordUnit">确定</view>
			</view>
		</u-popup>
		<!-- 广告弹出层 -->
		<cover-view class="mask" v-if="homeAdsShow && !openRecordUnit">
			<!-- 		<view class="mask" v-if="homeAdsShow && !openRecordUnit"> -->
			<cover-view class="AdView-mask">
				<cover-image class="mask-img" :src="homeAdsInfo.imgSrc"
					@click="jumpHomeAdsUrl(homeAdsInfo.jumpUrl)"></cover-image>
				<cover-image class="an-niu" @click="closeHomeAds" src="/static/close.png"></cover-image>
				<!-- <image class="close-mask" bindtap="hiddenMsak" src="../../images/closemask.png"></image> -->
			</cover-view>
		</cover-view>

	</view>
</template>

<script>
	import {
		baseUrl,
		imgUrl,
		shareType
	} from "../../config/index.js"
	export default {
		data() {
			return {
				lastHomeAdsSrc: uni.getStorageSync('lastHomeAdsSrc'),
				homeAdsInfo: {},
				floorAdsInfo: [],
				showColumnsRecent: false,
				chartHide: false,
				recentValue: {
					value: "14",
					label: "最近14天",
				},
				recordValue: {
					value: "-1",
					label: "全部记录",
				},
				columnsRecent: [{
						value: "14",
						label: "最近14天"
					},
					{
						value: "30",
						label: "最近30天"
					},
					{
						value: "60",
						label: "最近60天"
					},
				],
				showColumnsRecord: false,
				columnsRecord: [{
						value: "-1",
						label: "全部记录"
					},
					{
						value: "1",
						label: "只看起床空腹"
					},
					{
						value: "2",
						label: "只看睡前"
					},
					{
						value: "3",
						label: "只看正餐前"
					},
					{
						value: "4",
						label: "只看正餐后"
					},
				],
				weightInfo: {
					average: 0,
					overDay: 0,
					hightest: 0,
					lowest: 0,
				},
				openRecordUnit: false,
				unit: "",
				weightList: [{
						title: "上月平均体重",
						value: "",
					},
					{
						title: "本月平均体重",
						value: "",
					},
					{
						title: "上月超过目标体重天数",
						value: "",
						type: "error",
					},
					{
						title: "本月超过目标体重天数",
						value: "",
						type: "error",
					},
				],
				recentData: {},
				historyData: {},
				resentOpts: {
					color: [
						"#91CB74",
						"#1890FF",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					dataLabel: false,
					padding: [15, 10, 0, 25],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						marginTop: 10,
						labelCount: 7,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						splitNumber: 5,
						// 此处format需要写在data内部,否则不生效
						data: [{
							tofix: 1,
							min: 0.0,
							max: 0.0
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
						}
					},
				},
				averageOpts: {
					color: [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: [15, 10, 0, 25],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						marginTop: 10,
						labelCount: 7
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						splitNumber: 5,
						data: [{
							max: 0.0,
							min: 0.0,
							tofix: 1,
						}],
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
						},
						// column: {
						// 	type: "group",
						// 	width: 30,
						// 	activeBgColor: "#000000",
						// 	activeBgOpacity: 0.08
						// }
					},
				}
			};
		},
		watch: {
			showColumnsRecent(newValue) {
				this.chartHide = !!newValue;
			},
			showColumnsRecord(newValue) {
				this.chartHide = !!newValue;
			},
		},
		computed: {
			homeAdsShow() {
				if (this.homeAdsInfo && this.homeAdsInfo.imgSrc) {
					return this.lastHomeAdsSrc != this.homeAdsInfo.imgSrc;
				} else {
					return false;
				}
			}
		},
		onLoad(query) {
			const that = this;
			// #ifdef MP-WEIXIN
			uni.login({
				provider: "weixin",
				success: async function(res) {
					console.log(res)
					await that.getOpenId(res);
					that.getUserInfo();
					// uni.setStorageSync("openid", "accountfortest5");
					// that.getUserInfo();
				},
			});

			// 微信分享函数
			wx.showShareMenu({
				// 不携带分享者信息
				withShareTicket: false,
				// 设置分享按钮：shareAppMesage=>分享至好友;shareTimeline=>分享至朋友圈
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif
		},
		// 分享至好友
		onShareAppMessage(res) {
			const imageIndex = (Math.floor(Math.random() * 24) + 1).toString().padStart(3, '0')
			return {
				title: '我正在使用铁蛋记体重,你也来试试吧!',
				type: shareType,
				path: '/pages/index/index',
				imageUrl: `${imgUrl}/img/emojs/mm${imageIndex}.png`
			}
		},
		// 分享至朋友圈
		onShareTimeline(res) {
			const imageIndex = (Math.floor(Math.random() * 24) + 1).toString().padStart(3, '0')
			return {
				title: '我正在使用铁蛋记体重,你也来试试吧!',
				type: shareType,
				path: '/pages/index/index',
				imageUrl: `${imgUrl}/img/emoj/mm${imageIndex}.gif`
			}
		},
		// 
		onShow() {
			// #ifdef MP-WEIXIN
			const unit = uni.getStorageSync("unit");
			this.unit = String(unit);
			if (this.unit === "0" || this.unit === "1") {
				this.initChart();
			}
			console.log('recentData', this.recentData);
			console.log('lineRef', this.$refs.lineRef);
			// #endif

			// 获取广告
			this.getHomeAdsList();
			// 获取楼层广告
			this.getFloorAdsList();
		},
		methods: {
			// 获取楼层广告
			getFloorAdsList() {
				let self = this;
				uni.request({
					url: baseUrl + '/getFloorAdsList',
					method: 'get',
					success: function(res) {
						let e = res.data.data;
						console.log("e", e);
						let r = e.map(obj => {
							return {
								...obj,
								imgSrc: baseUrl + '/upload' + obj.imgSrc
							}
						})
						console.log(r)
						self.floorAdsInfo = r;
					}
				})
			},
			// 跳转楼层广告地址
			jumpFloorAdsUrl(e) {
				console.log(e)
				if (e) {
					uni.navigateTo({
						url: '/page_child/outer?e=' + encodeURIComponent(e)
					})
				}
				return false;
			},
			// 关闭首页广告
			closeHomeAds() {
				console.log("q123");
				console.log(this.homeAdsInfo.imgSrc);
				this.lastHomeAdsSrc = this.homeAdsInfo.imgSrc;
				uni.setStorageSync('lastHomeAdsSrc', this.homeAdsInfo.imgSrc)
			},
			// 跳转首页广告地址
			jumpHomeAdsUrl(e) {
				console.log(e)
				if (e) {
					uni.navigateTo({
						url: '/page_child/outer?e=' + e
					})
				}
				return false;
			},
			// 获取首页广告
			getHomeAdsList() {
				let self = this;
				uni.request({
					url: baseUrl + '/homeAdsList',
					method: 'get',
					success: function(res) {
						console.log("homeAds", res.data)
						if (res.data.data.length != 0) {
							let e = res.data.data[0];
							self.homeAdsInfo = e
							self.homeAdsInfo.imgSrc = imgUrl + '/upload' + e.imgSrc
						}
					}
				})
			},
			async getOpenId(res) {
				try {
					const {
						data
					} = await this.$ajax.user.getOpenId({
						code: res.code,
					});
					uni.setStorageSync("openid", data.openid);
				} catch (error) {
					console.log(error);
				}
			},
			async getUserInfo() {
				try {
					const {
						data: {
							weight: history,
							...target
						},
					} = await this.$ajax.user.login({
						openid: uni.getStorageSync("openid"),
					});
					if (history) {
						uni.setStorageSync("history", history);
					}
					if (target) {
						uni.setStorageSync("target", target);
					}
					if (String(target.unit) === "0" || String(target.unit) === "1") {
						uni.setStorageSync("unit", target.unit);
						this.initChart();
					} else {
						this.openRecordUnit = true;
					}
				} catch (error) {
					this.openRecordUnit = true;
					console.log(error);
				}
			},
			initChart() {
				const history = uni.getStorageSync("history");
				this.getLastMonthAverageWeight(history);
				this.getThisMonthAverageWeight(history);
				this.getLastMonthOverTarget(history);
				this.getThisMonthOverTarget(history);
				this.getRecentData(history);
				this.getHistoryData(history);
			},
			onChooseRecordUnit(type) {
				this.unit = type;
			},
			onConfirmRecordUnit() {
				if (this.unit === "") {
					uni.showToast({
						title: "请选择单位",
						icon: "none",
					});
					return;
				}
				uni.setStorageSync("unit", this.unit);
				const target = uni.getStorageSync("target");
				if (target) {
					target.unit = this.unit;
					uni.setStorageSync("target", target);
				}
				this.$store.dispatch("user/syncUnit", this.unit);
				this.openRecordUnit = false;
				this.initChart();
			},
			getRecentData(history) {
				const rate = this.unit === "1" ? 0.5 : 1;
				const period = this.recentValue.value;
				const filterType = this.recordValue.value;
				const now = new Date();
				// 获取最近length天的日期
				const xData = Array.from({
					length: period
				}, (v, i) => {
					return this.$moment(now).subtract(i, "days").format("YYYY-MM-DD");
				}).reverse();
				console.log("xData", xData);
				const filterList = history
					.filter((i) => xData.includes(i.date.split(" ")[0]))
					.filter((i) => {
						if (filterType === "-1") {
							return true;
						} else {
							return String(i.type) === String(filterType);
						}
					});
				const yData = xData.map((item) => {
					const list = filterList.filter((i) => i.date.includes(item));

					if (list.length) {
						const weight = list.reduce((total, item) => {
							return total + Number(item.weight);
						}, 0);
						return (weight / list.length).toFixed(1);
					} else {
						return null;
					}
				});

				if (filterList.length) {
					const average =
						filterList.reduce((total, item) => {
							return total + Number(item.weight);
						}, 0) / filterList.length;

					const validList = yData.filter((i) => i !== null).map((i) => Number(i));
					const hightest = Math.max(...validList);
					const lowest = Math.min(...validList);
					let count = 0;
					const target = uni.getStorageSync("target");
					if (target && !!target.targetWeight) {
						const value = target.targetWeight;
						yData.forEach((element) => {
							if (Number(element) > Number(value)) {
								count++;
							}
						});
					}
					if (target && target.targetWeight) {
						const max =
							Math.max(Number(hightest), Number(target.targetWeight)) + 20;
						this.resentOpts.yAxis.data[0].max = (max * rate);
						const min =
							Math.min(Number(lowest), Number(target.targetWeight)) - 20;
						this.resentOpts.yAxis.data[0].min = Math.max(
							(min * rate),
							0
						);
					} else {
						this.resentOpts.yAxis.data[0].max = (Number(hightest) + 20) * rate;
						this.resentOpts.yAxis.data[0].min = Math.max(
							(Number(lowest) - 20) * rate,
							0
						);
					}

					this.weightInfo = {
						average: Number(average * rate).toFixed(1),
						overDay: count,
						hightest: Number(hightest * rate).toFixed(1),
						lowest: Number(lowest * rate).toFixed(1),
					};
				} else {
					this.weightInfo = {
						average: 0,
						overDay: 0,
						hightest: 0,
						lowest: 0,
					};
				}

				try {
					const series = [{
						name: "日均体重",
						data: yData.map((item) => {
							return item ? Number(item * rate).toFixed(1) : null;
						}),
						color: "#1890FF",
						connectNulls: true
					}, ];
					const target = uni.getStorageSync("target");
					if (target && !!target.targetWeight) {
						let value = Number(target.targetWeight) * rate;
						series.unshift({
							name: "目标体重",
							data: Array.from({
								length: period
							}, (v, i) => {
								return value.toFixed(1);
							}),
							color: "#91CB74",
							textColor: "transparent",
						});
					}
					let goalWeight = target.targetWeight;
					let seriesIndex = goalWeight ? 1 : 0;
					let maxData = Math.max(...series[seriesIndex].data.filter((num) => num !==
						null))
					let minData = Math.min(...series[seriesIndex].data.filter((num) => num !==
						null))
					maxData = (maxData == Math.max()) ? 100.0 * rate : maxData
					minData = (minData == Math.min()) ? 90.0 * rate : minData
					let maxNumber = goalWeight ? Math.max(Number(maxData), Number(goalWeight * rate)) + 4 : Math.max(
						Number(
							maxData), ) + 4
					let minNumber = goalWeight ? Math.min(Number(minData), Number(goalWeight * rate)) - 4 : Math.min(
						Number(
							minData), ) - 4;
					this.resentOpts.yAxis.data[0]['max'] = maxNumber;
					this.resentOpts.yAxis.data[0]['min'] = minNumber < 0 ? 0 : minNumber;
					this.$refs.lineRef.opts = this.resentOpts
					console.log("lineRef=>", this.$refs.lineRef.opts)
					let res = {
						categories: xData.map((item) => {
							return item.slice(5);
						}),
						series,
					}
					this.recentData = JSON.parse(JSON.stringify(res));
					console.log(res)
				} catch (error) {
					console.log(error);
				}
			},
			getHistoryData(history) {
				const rate = this.unit === "1" ? 0.5 : 1;
				try {
					const now = new Date();
					// 获取前6个月的日期
					const xData = Array.from({
						length: 6
					}, (v, i) => {
						return this.$moment(now).subtract(i, "months").format("YYYY-MM");
					}).reverse();
					const yData = xData.map((item) => {
						const filter = history.filter((i) => i.date.includes(item));
						if (!filter.length) return null;
						let weight = 0;
						filter.forEach((element) => {
							weight += Number(element.weight);
						});
						return ((weight * rate) / filter.length).toFixed(1);
					});
					let res = {
						categories: xData,
						series: [{
							name: "月均体重",
							data: yData,
							connectNulls: true
						}, ],
					};
					let maxData = Math.max(...yData.filter((num) => num !== null));
					let minData = Math.min(...yData.filter((num) => num !== null));
					maxData = (maxData == Math.max()) ? 100.0 + 10 * rate : (maxData + 10 * rate);
					minData = (minData == Math.min()) ? 0: (minData - 10 * rate);
					// const max = Math.max(...yData) + 10 * rate;
					// const min = Math.min(...yData) == Math.min();
					this.averageOpts.yAxis.data[0]['max'] = maxData;
					this.averageOpts.yAxis.data[0]['min'] = minData;
					this.$refs.barRef.opts = this.averageOpts
					console.log("barRef=>", this.$refs.barRef.opts)
					this.historyData = JSON.parse(JSON.stringify(res));
				} catch (error) {
					console.log(error);
				}
			},
			getLastMonthAverageWeight(history) {
				const rate = this.unit === "1" ? 0.5 : 1;
				const now = new Date();
				// 获取上个月的日期
				const lastMonth = this.$moment(now)
					.subtract(1, "months")
					.format("YYYY-MM");
				const filter = history.filter((i) => i.date.includes(lastMonth));
				if (filter.length) {
					let weight = 0;
					filter.forEach((element) => {
						weight += Number(element.weight);
					});
					this.weightList[0].value = ((weight * rate) / filter.length).toFixed(1);
				} else {
					this.weightList[0].value = "0";
				}
			},
			getThisMonthAverageWeight(history) {
				const rate = this.unit === "1" ? 0.5 : 1;
				const now = new Date();
				// 获取本个月的日期
				const thisMonth = this.$moment(now).format("YYYY-MM");
				const filter = history.filter((i) => i.date.includes(thisMonth));
				if (filter.length) {
					let weight = 0;
					filter.forEach((element) => {
						weight += Number(element.weight);
					});
					this.weightList[1].value = ((weight * rate) / filter.length).toFixed(1);
				} else {
					this.weightList[1].value = "0";
				}
			},
			getLastMonthOverTarget(history) {
				const now = new Date();
				// 获取上个月的日期
				const lastMonth = this.$moment(now)
					.subtract(1, "months")
					.format("YYYY-MM");
				console.log("history", history)
				const filter = history.filter((i) => i.date.includes(lastMonth));
				if (filter.length) {
					let count = 0;
					const target = uni.getStorageSync("target");
					if (target && !!target.targetWeight) {
						const value = target.targetWeight;
						// const average =
						// 	filter.reduce((total, item) => {
						// 		return total + Number(item.weight);
						// 	}, 0) / filter.length;
						// if (Number(average) > Number(value)) {
						// 	count++;
						// }
						const e = filter.filter((item) => {
							return item.weight > value
						})
						this.weightList[2].value = e.length;
					}
				} else {
					this.weightList[2].value = "0";
				}
			},
			getThisMonthOverTarget(history) {
				const now = new Date();
				// 获取本个月的日期
				const thisMonth = this.$moment(now).format("YYYY-MM");
				const filter = history.filter((i) => i.date.includes(thisMonth));
				if (filter.length) {
					// 根据filter的date，进行分组，然后计算每组的平均值，再与目标体重进行比较
					let count = 0;
					const target = uni.getStorageSync("target");
					if (target && !!target.targetWeight) {
						const targetWeight = target.targetWeight;
						const group = {};
						filter.forEach((item) => {
							const date = item.date.slice(0, 10);
							if (!group[date]) {
								group[date] = [];
							}
							group[date].push(item);
						});
						for (const key in group) {
							if (Object.hasOwnProperty.call(group, key)) {
								const element = group[key];
								const average =
									element.reduce((total, item) => {
										return total + Number(item.weight);
									}, 0) / element.length;
								if (Number(average) > Number(targetWeight)) {
									count++;
								}
							}
						}
					}
					this.weightList[3].value = count;
				} else {
					this.weightList[3].value = "0";
				}
			},
			confirmRecent(e) {
				this.recentValue = this.columnsRecent[e.detail.value];
				this.initChart();
			},
			confirmRecord(e) {
				this.recordValue = this.columnsRecord[e.detail.value];
				this.initChart();
			},
			formatGridValue({
				title,
				value
			}) {
				switch (title) {
					case "上月平均体重":
					case "本月平均体重":
						return `${value}${this.unit === "1" ? "kg" : "斤"}`;
					case "上月超过目标体重天数":
					case "本月超过目标体重天数":
						return `${value}天`;
					default:
						return value;
				}
			},
			jumpTheory() {
				let recentDay = -1;
				let recentWeight = 0.0;
				console.log(this.recentData)
				if (this.recentData && this.recentData.series && this.recentData.series[1] && this.recentData.series[1]
					.data) {
					let data = JSON.parse(JSON.stringify(this.recentData.series[1].data));
					let fNERI = data.findIndex(item => item != null && item !== undefined && item != "");
					let rArray = data.slice().reverse();
					let lNERI = rArray.findIndex(item => item != null && item !== undefined && item != "");
					let fLNERI = data.length - 1 - lNERI;
					recentDay = (fNERI == -1) ? -1 : (fLNERI - fNERI + 1);
					recentWeight = Number((data[fLNERI] - data[fNERI]).toFixed(1));
					console.log("first", fNERI, "last", fLNERI);
				} else {
					recentDay = -1;
				}
				uni.navigateTo({
					url: '/page_theory/egg-theory/index?recentDay=' + recentDay + '&recentWeight=' +
						recentWeight +
						"&unit=" + this.unit
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 20rpx;
		padding-bottom: 140rpx;

		.top-section {
			height: 80rpx;
			margin: 0 20rpx;

			.item {
				flex: 1;
				height: 100%;
			}

			.label {
				font-size: $uni-font-size-lg;
				color: #999;
				margin-right: 4rpx;
			}
		}

		.charts-box {
			margin-top: 20rpx;
			width: 100%;
			height: 600rpx;

			&.hide {
				transform: translateX(100vw);
			}
		}

		.record-way-wrap {
			width: 680rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.btn-radio {
				align-self: center;
				width: 480rpx;
				height: 100rpx;
				font-size: $uni-font-size-lg;
				color: #000000;
				border-radius: 20rpx;
				border: 2rpx solid #999;
				font-weight: bold;

				&.active {
					color: #fff;
					background-color: #91cb74;
				}

				margin: 20rpx 0;
			}

			.btn-large {
				align-self: center;
			}
		}

		.weightInfo {
			width: 700rpx;
			margin: 8rpx auto 0;
			padding: 0rpx 8rpx 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.l-columnCenter {
				height: 160rpx;
				justify-content: space-between;

				&+.l-columnCenter {
					border-left: 2rpx solid #eee;
				}
			}

			.label {
				font-size: $uni-font-size-base;
				color: #999;
				text-align: center;
			}

			.value {
				margin-top: 10rpx;
				font-size: $uni-font-size-base;
				color: #000000;
				font-weight: bold;
			}
		}

		.add-wrap {
			width: 700rpx;
			padding: 20rpx 0;
			margin: 0 auto 0;
			border-radius: 20rpx;
			border: 1rpx solid #eee;
			background-color: #eee;
			box-shadow: 0 0 10rpx #eee;
			font-size: $uni-font-size-lg;

			.btn-set {
				color: #ffffff;
				background: $uni-color-primary;
				border-radius: 100rpx;
				margin: 20rpx 20rpx 0;
				width: 400rpx;
				height: 130rpx;
				font-size: 54rpx;
			}

			.btn-group {
				font-size: 40rpx;
				margin-top: 26rpx;
				padding: 0 36rpx;

				.btn {
					color: $uni-color-primary;
				}

				.btn-delete {
					// color: $uni-color-error;
				}
			}
		}

		.record-wrap {
			width: 700rpx;
			padding: 20rpx;
			margin: 20rpx auto 0;
			border-radius: 20rpx;
			border: 1rpx solid #eee;
			background-color: #fff;
			box-shadow: 0 0 10rpx #eee;

			.tit {
				font-size: $uni-font-size-lg;
				color: $uni-text-color-grey;
				text-align: center;
				padding: 0 10rpx;
			}

			&.hide {
				transform: translateX(100vw);
			}
		}
	}

	/* 广告弹窗 */
	.mask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 99998;
	}

	.mask .AdView-mask {
		position: relative;
		width: 664rpx;
		height: 864rpx;
		top: 300rpx;
		left: 126rpx;

	}

	.mask .AdView-mask .mask-img {
		border-radius: 28rpx;
		width: 500rpx;
		height: 700rpx;
	}

	.mask .AdView-mask .an-niu {
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		top: 730rpx;
		left: 240rpx;
	}

	.mask .AdView-mask .close-mask {
		position: absolute;
		width: 57rpx;
		height: 57rpx;
		bottom: 0;
		left: 302rpx;
	}

	.floor-ads {
		width: 90%;
		margin: 20rpx 5%;
		border-radius: 12rpx;
		box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, .5);
		height: 266rpx;

		& image {
			width: 100%;
			height: 266rpx;
			border-radius: 12rpx;
		}
	}
</style>